


Embed That Audio

by Azdaema Codes (Azdaema)



Series: Podfic Meta [2]
Category: Podfic Fandom
Genre: Fanwork Research & Reference Guides, Metafiction, Other, Podfic Meta
Language: English
Status: Completed
Published: 2020-03-10
Updated: 2020-03-10
Packaged: 2021-02-28 06:00:00
Rating: Not Rated
Warnings: Creator Chose Not To Use Archive Warnings
Chapters: 5
Words: 1,912
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/22965031
Author URL: https://archiveofourown.org/users/Azdaema/pseuds/Azdaema%20Codes
Summary: How to embed audio content on AO3, plus a skin to make audio players automatically size right.
Relationships: AO3 & Podfic, Me & CSS
Series: Podfic Meta [2]
Series URL: https://archiveofourown.org/series/1660060
Comments: 4
Kudos: 13





	1. Intro

"How should I embed my podfic?"

So there are 3 main ways to embed audio on AO3:

  1. The `<audio>` tag
  2. Various audio hosting websites' `<iframe>` options
  3. The Dewplayer



As a default you should use the `<audio>` tag.

If you prefer a website's embedding option for whatever reason, then use that—those are also good. For example, if you have a multi-chapter fic, then you might want to embed from Archive.org and have a playlist. Or you might want to use SoundCloud simply because like the way it looks.

Dewplayer is the predecessor of `<audio>` (see [here](https://developer.mozilla.org/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content) or [here](https://source.opennews.org/articles/audio-browser/) to read more about that). You should not use the Dewplayer these days. I'm including it here just to be thorough, and document it as part of AO3's history with audio.

### Sizing

All embedding options except `<audio>` are weird about height. If no height is specified, they can't automatically handle their own height properly.

You can size each individual audio-player with the `width=` and `height=` attributes, but I personally don't like having to do that for every single podfic I post.

Lately I've gone on a CSS kick and learned all about [selectors](https://www.w3schools.com/cssref/css_selectors.asp). With selectors, you can tell things about the audio from its link, and then write specific rules based on that. So I created [this skin](https://github.com/Azdaema/AO3-Skin_Podfic/blob/master/version%202/audio.css). The idea of this skin is that you can use it and then audio elments _will_ automatically be sized properly.

### File-embedding vs website-embedding

With `<audio>` and the Dewplayer, the link to use is the **download link**. To get that, go to wherever you're hosting the audio, right-click on the download button, and select "copy link address."

To embed audio from a website with an `<iframe>`, you go to the page your audio is hosted on and click the share/embed button. It's the one that looks like this:

Click it and this little "share/embed" thing pops up, containing some HTML for you to copy-paste.

File links are _not_ subject to the AO3 whitelist. Websites' `<iframe>` _are_.

### The Whitelist

When you embed from a website, the little player thingy is provided by _that website_. This is why they look different from each other.

Most audio-related websites have an embedding option—it's a very common way for people want to use audio—but not all of them can be used on AO3. For example, while [Clyp.it](https://clyp.it/) offers embedding, it cannot be used on AO3.

> The HTML Sanitizer we use runs a very tight whitelist on sites we allow to provide media code (this is necessary in order to ensure we don't let malevolent code slip by). If it's not posted to one of these listed sites, the Sanitizer will delete the embed code entirely.
> 
>     * [archive.org](https://archive.org/)
>     * [criticalcommons.org](https://criticalcommons.org/)
>     * [dailymotion.com](https://www.dailymotion.com/)
>     * [google.com](https://www.google.com/)
>     * [metacafe.com](https://www.metacafe.com/)
>     * [podfic.com](http://podfic.com/)
>     * [ning.com](https://www.ning.com/)
>     * [soundcloud.com](https://soundcloud.com/)
>     * [spotify.com](https://www.spotify.com/)
>     * [vidders.net](https://vidders.net/)
>     * ~~viddertube.net~~ [viddertube.com](http://viddertube.com/)
>     * [vimeo.com](https://vimeo.com/)
>     * [youtube.com](https://www.youtube.com/)
>     * [8tracks.com](https://8tracks.com/)
> 
> [AO3 admin post "Let's make some noise!"](/admin_posts/201)
> 
> 


Let's go through the list. 8tracks, Spotify, and Ning are commercially-oriented sites. Dailymotion, Metacafe, Vidders.net, VidderTube, Vimeo, and YouTube are all video-based sites. While audio _could theoretically_ be hosted there as well, that is not what most podficcers prefer.

> I suppose YouTube is video-based, but audio is a large component of what's _comfortable_ there. Whereas in many ways, _all_ of the things that we're using—AO3, LJ, Tumblr, whatever—are text-based, and we're forcing an audio product onto it. […] I guess I can see how it's a natural fit for podfic, but I think this is a question of _fandom_ spaces verses spaces for a certain _kind of media_ , because—as I sit here and think about it—YouTube makes a lot of sense for podfic as a media type.
> 
> [Auralphonic 028: "How Platforms Affect Podfic"](https://archiveofourown.org/works/10732491)

podfic.com does not really exist. If you go there you get the message "Content coming eventually." I'm not entirely sure what google.com means on this list—many people host podfic on their Google Drives, but I've yet to see someone successfully embed audio from there. I don't know any podficcers who use Critical Commons, but the OTW has a post about it [here](https://transformativeworks.org/critical-commons/) if you want to learn more.

As far as I know, the only websites podficcers on AO3 use are SoundCloud and archive.org.


	2. Intro

In November 2019, AO3 added support for the `<audio>` element. See the admin post [here](/admin_posts/14125).

The `<audio>` element is native, meaning it doesn't rely on plug-ins or other websites, like past audio options did.
    
    
    :not(.userstuff)>audio {
    	width: 100%;
    }
    

`userstuff` is the part of the page where you put in your content. If, within that section, the `<audio>` element is just loose, you probably don't want it being 100% of the width avaliable for text. However, if you put it in somthing—a `<div>`, a table, etc.—then you probably _would_ want it to fill the width avalible width in that.

Example | Code  
---|---  
| 
    
    
    <audio src="MP3_FILE_URL"></audio>  
  
One thing to know about `<audio>` is that it the player looks different across different browsers. As I write this, in March 2020, this is what they look like:


	3. Archive.org

When you copy-paste the HTML from the "embed" tab, some of it is extraneous. The only bit you really want is `src=` with the link.

### Solo tracks

The player is 30px tall.
    
    
    :not(.userstuff)>iframe {
    	width: 100%;
    }
    
    iframe[src^="https://archive.org/embed/"]:not([src*="playlist=1"]) {
    	height: 30px;
    }
    

Example | HTML code  
---|---  
| 
    
    
    <iframe src="https://archive.org/embed/AzdaemaPodfic-KnowYourPlaceYouBelongToMe"></iframe>  
  
### Playlists

Archive.org has a parameters for playlists ([see here](https://archive.org/help/audio.php)) , which are great for multi-chapter fics. For a playlist, you add the parameters `&playlist=1` and `&list_height=`. The list height is the height of _just_ the list portion—the height of the whole element should be list_height + 30, because the player is there as well.

With the skin, I set up cases for line heights 100 through 500 at intervals of 50. You can easily add more to _your_ version of the skin—I just had to stop _somewhere_.
    
    
    iframe[src^="https://archive.org/embed/"][src*="&list_height=100"] {height: 130px;}
    iframe[src^="https://archive.org/embed/"][src*="&list_height=150"] {height: 180px;}
    iframe[src^="https://archive.org/embed/"][src*="&list_height=200"] {height: 230px;}
    iframe[src^="https://archive.org/embed/"][src*="&list_height=250"] {height: 280px;}
    iframe[src^="https://archive.org/embed/"][src*="&list_height=300"] {height: 330px;}
    iframe[src^="https://archive.org/embed/"][src*="&list_height=350"] {height: 380px;}
    iframe[src^="https://archive.org/embed/"][src*="&list_height=400"] {height: 430px;}
    iframe[src^="https://archive.org/embed/"][src*="&list_height=450"] {height: 480px;}
    iframe[src^="https://archive.org/embed/"][src*="&list_height=500"] {height: 530px;}
    

Example | HTML code  
---|---  
| 
    
    
    <iframe src="https://archive.org/embed/Alpha01 **& playlist=1&list_height=100** **"** ></iframe>  
  
Alternatively, if you have just _one_ that's a weird height, you can also set its height with HTML.

Example | HTML code  
---|---  
| 
    
    
    <iframe src="https://archive.org/embed/Alpha01&playlist=1&list_height=117" **height ="147px"**></iframe>  
  
Archive.org _really_ wants at least the last element of the list to be covered, and require scrolling down to see. I haven't yet found a way to make the whole list visible at once.

### Rounded

Just a little extra, in case you want it.
    
    
    iframe[src^="https://archive.org/embed/"]:not([src*="playlist=1"]).round {
      border-radius: 15px;
    }
    

Example | HTML code  
---|---  
| 
    
    
    <iframe src="https://archive.org/embed/AzdaemaPodfic-KnowYourPlaceYouBelongToMe" **class ="round"**></iframe>


	4. SoundCloud

When you copy-paste the HTML from the "embed" tab, a _bunch_ of it is extraneous—the only bit that's really key is the link. AO3 will automatically strip away parts of that code when you save in anyways, and I would encourage you to remove even more, stripping away everything except the link. Below I'll explain what the various parts do, and then you can add back in the features you actually want.

### Basic styles

SoundCloud has 3 basic variations.

Style | Example | HTML code  
---|---|---  
Visual |  | 
    
    
    <iframe src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/219309741 **& visual=true**"></iframe>  
  
Classic |  | 
    
    
    <iframe src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/219309741"></iframe>  
  
Mini |  | 
    
    
    <iframe **class="mini"** src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/219309741"></iframe>  
      
    
    :not(.userstuff)>iframe {
    	width: 100%;
    }
    
    /* Default */
    iframe[src^="https://w.soundcloud.com/player/"] {
    	height: 166px;
    }
    
    /* Mini */
    iframe[src^="https://w.soundcloud.com/player/"].mini {
    	height: 20px;
    }
    
    /* Visual */
    iframe[src^="https://w.soundcloud.com/player/"][src*="&visual=true"] {
    	height: 300px;
    	width: auto;
    }
    

Visual is the only one where I don't set the width to 100%. The idea of it is that it ["emphasizes the artwork for your track"](https://help.soundcloud.com/hc/en-us/articles/115003566828-The-Visual-embedded-player-), and if you make it 100% width, the artwork is too wide. It gets zoomed it too far and then clipped, and it just looks bad.

When you're on the embed tab on SoundCloud, they will tell you that you have to upgrade to pro to get the mini player. Bitch no you don't. All it takes it setting the height to 20px, which—funily enough—is the one bit the [picture here shows](https://help.soundcloud.com/hc/en-us/articles/115003449027-The-Mini-embedded-player) before it goes out of sight.

### Parameters (see [here](https://developers.soundcloud.com/docs/api/html5-widget))

Since _AO3 Gothic_ does not "enable direct downloads" option checked, I'm switching to a podfic of mine for this demo. Note that while I'm using the Classic style here, these parameters can also be used with Visual and Mini.

Parameter | Example | HTML code  
---|---|---  
`color` |  | 
    
    
    <iframe src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/401369514 **& color=%23d67375**"></iframe>  
  
`sharing` |  | 
    
    
    <iframe src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/401369514 **& sharing=false**"></iframe>  
  
`download` |  | 
    
    
    <iframe src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/401369514 **& download=false**"></iframe>  
  
`show_artwork` |  | 
    
    
    <iframe src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/401369514 **& show_artwork=false**"></iframe>  
  
`show_playcount` |  | 
    
    
    <iframe src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/401369514 **& show_playcount=false**"></iframe>  
  
`show_user` |  | 
    
    
    <iframe src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/401369514 **& show_user=false**"></iframe>


	5. Dewplayer

Dewplayer is a Flash-based MP3 player that AO3 installed back in 2012. See the admin post [here](/admin_posts/250).

It is the predecessor of `<audio>`, and in November 2019 when AO3 adopted `<audio>` they began saying, "While we have no plans to remove Dewplayer at this time, we strongly recommend updating to the `<audio>` tag."

Style | Example | HTML code  
---|---|---  
Classic | 

| 
    
    
    <embed flashvars="mp3=MP3_FILE_URL" type="application/x-shockwave-flash" src="https://archiveofourown.org/system/dewplayer/ **dewplayer.swf** " allowscriptaccess="never" allownetworking="internal"></embed>  
  
Classic with volume control | 

| 
    
    
    <embed flashvars="mp3=MP3_FILE_URL" type="application/x-shockwave-flash" src="https://archiveofourown.org/system/dewplayer/ **dewplayer-vol.swf** " allowscriptaccess="never" allownetworking="internal"></embed>  
  
Bubble | 

| 
    
    
    <embed flashvars="mp3=MP3_FILE_URL" type="application/x-shockwave-flash" src="https://archiveofourown.org/system/dewplayer/ **dewplayer-bubble.swf** " allowscriptaccess="never" allownetworking="internal"></embed>  
  
Bubble with volume controls | 

| 
    
    
    <embed flashvars="mp3=MP3_FILE_URL" type="application/x-shockwave-flash" src="https://archiveofourown.org/system/dewplayer/ **dewplayer-bubble-vol.swf** " allowscriptaccess="never" allownetworking="internal"></embed>  
  
Another gross thing about the Dewplayer is that the width is fixed. With all the other embedding options, you can set the width to 100% and the element will grow to whatever the width of its container is (for example, they'll fill a table cell). With the Dewplayer, width does not change.
    
    
    embed[src="https://archiveofourown.org/system/dewplayer/dewplayer.swf"] {
    	height: 21px;
    	width: 200px;
    }
    
    embed[src="https://archiveofourown.org/system/dewplayer/dewplayer-vol.swf"] {
    	height: 21px;
    	width: 240px;
    }
    
    embed[src="https://archiveofourown.org/system/dewplayer/dewplayer-bubble.swf"],
    embed[src="https://archiveofourown.org/system/dewplayer/dewplayer-bubble-vol.swf"] {
    	height: 65px;
    	width: 252px;
    }
    

[Update](/admin_posts/18129)


End file.
